<template>
    <div class="loginView flex-d flex-align flex-j-c po-re">
        <mySpin v-if="loading" type="dot-collision" />
          <div class="logo">
              <img src="@/assets/img/logo1.png" alt="">
          </div>
          <div class="co">
            <div v-if="registerStep != 2">
                <div class="flex flex-j-s" style="padding:0 78px;">
                  <div>
                      <div v-if="registerStep == 0">
                          <el-form :model="form" label-width="0" size="large">
                              <el-form-item label="" class="flex">
                                  <div style="font-size:18px;font-weight:bold;" class="p-r">账号</div>
                                  <div style="width: 400px;">
                                      <el-input v-model="form.userName" placeholder="请输入邮箱或手机号" style="height: 40px;"/>
                                  </div>
                                  
                              </el-form-item>
                              <el-form-item label="" style="margin-top:40px;">
                                  <div style="font-size:18px;font-weight:bold;" class="p-r">密码</div>
                                  <div style="width: 400px;">
                                      <el-input v-model="form.userPwd" placeholder="8-16位密码，数字，大小写字母，符号" style="height: 40px;">
                                      </el-input>
                                  </div>
                                  
                              </el-form-item>
                          </el-form>
                          <div class="flex" style="padding-left:50px;">
                            <el-checkbox v-model="checked1" label="" size="large" >
                                <div style="text-align:left;">阅读并接受<span style="color:rgba(209, 11, 0, 1);">用户协议</span><span style="color:rgba(209, 11, 0, 1);">隐私协议</span></div>
                            </el-checkbox>
                          </div>
                          
                      </div>
                      <div v-if="registerStep == 1">
                          <el-form :model="form" label-width="0" size="large">
                              <el-form-item label="" class="flex">
                                  <div style="font-size:18px;font-weight:bold;" class="p-r">手机号</div>
                                  <div style="width: 400px;">
                                      <el-input v-model="form.mobile" placeholder="请输入手机号" style="height: 40px;"/>
                                  </div>
                                  
                              </el-form-item>
                              <el-form-item label="" style="margin-top:40px;">
                                  <div style="font-size:18px;font-weight:bold;" class="p-r">验证码</div>
                                  <div style="width: 400px;">
                                      <el-input v-model="form.code" placeholder="请输入验证码" style="height: 40px;">
                                          <template #append>
                                              <div class="cursor-p" @click="send" style="color: #d10b00;">
                                                  {{ str }}
                                              </div>
                                          </template>
                                      </el-input>
                                  </div>
                                  
                              </el-form-item>
                          </el-form>
                          <div class="flex flex-j-s">
                              <div class="login-tip" style="padding-left:70px;"></div>
                              
                          </div>
                      </div>
                      
                  </div>
                  <div style="width:30%;">
                      <el-steps :active="registerStep" align-center>
                          <el-step title="" description="" >
                            <template v-slot:title>
                                <div class="step" >
                                    <div class="p">填写</div>
                                    <div class="p">账号密码</div>
                                </div>
                            </template>
                          </el-step>
                          <el-step title="" description="" >
                            <template v-slot:title>
                                <div class="step" >
                                    <div class="p">验证</div>
                                    <div class="p">手机号</div>
                                </div>
                            </template>
                          </el-step>
                          <el-step title="" description="" >
                            <template v-slot:title>
                                <div class="step" >
                                    <div class="p">完成</div>
                                    <div class="p">注册</div>
                                </div>
                            </template>
                          </el-step>
                      </el-steps>
                      <div class="login-tip" style="margin-top:35px;">
                        已有帐号？<span class="cursor-p" @click="gologin">立即登录</span>
                    </div>
                  </div>
              </div>
                <div class="flex flex-j-c">
                    <div class="btn cursor-p" @click="next">下一步</div>
                </div>
            </div>
            <div v-if="registerStep == 2">
                <div style="text-align: center;font-size:24px;padding: 20px 0;">恭喜完成注册！</div>
                <div class="flex flex-j-c">
                    <div class="btn cursor-p" @click="gohome">进入首页</div>
                </div>
            </div>
          </div>
    </div>
  </template>
  
  <script setup>
      import { ref,reactive, onMounted,getCurrentInstance } from "vue";
      const { proxy } = getCurrentInstance();
      import { useRouter } from "vue-router";
      const Router = useRouter();
      import { useStore } from 'vuex';
const store = new useStore();
      const form = ref({
            mobile:'',
            code:'',
            userName:'',
            userPwd:''
      })
      const loading = ref(false)
      const str = ref('发送验证码')
      const send = ()=>{
        if(str.value != '发送验证码'){
            return;
        }
        proxy.$http.request(proxy.$api.send_msg,'post',{
            "mobile": form.value.mobile
        },true, function (res) {
                if(res&&res.data){
                    proxy.$comJs.msg('success','发送验证码成功')
                    str.value = 60
                    setInterval(() => {
                        if(str.value > 0){
                            str.value = str.value-1
                        }else{
                            str.value = '发送验证码'
                        }
                    }, 1000);
                }
            }
        )
      }
      const login = ()=>{
        proxy.$http.request(proxy.$api.login,'post',{
            "mobile": form.value.mobile,
            "code":form.value.code,
            "userName": form.value.userName,
            "userPwd": form.value.userPwd
        },true, function (res) {
            if(res&&res.data){
                if(res.data.code== 0){
                    const jsonstr = {
                        'authorization' : res.headers.authorization,
                        'xUserid': res.headers['x-userid'],
                        'xSessionid':res.headers['x-sessionid']
                    }
                    localStorage.setItem( 'loginData', JSON.stringify(jsonstr));
                    localStorage.setItem( 'tabsStatus', 0 )
                    store.state.headerIndex = 0
                    proxy.$comJs.getUserInfo()
                    setTimeout(()=>{
                        loading.value = false
                        Router.push('/')
                    },600)
                }else{
                    loading.value = false
                }
            }else{
                loading.value = false
            }
        }
        )
      }
      const gologin=()=>{
        Router.push('/login')
      }
      const gohome = ()=>{
          localStorage.setItem( 'loginData', 11);
          Router.push('/')
      }
      const loginType = ref(1)
      const editType=()=>{
          loginType.value = 2
      }
      const registerStep = ref(0)
      
      const next = ()=>{
        if(registerStep.value == 0){
            if(form.value.userName&&form.value.userPwd){
                registerStep.value += 1
            }else{
                proxy.$comJs.msg('error','填写账号信息')
                
            }
        }
        if(registerStep.value == 1){
            if(form.value.mobile&&form.value.code){
                login()
                registerStep.value += 1
            }else{
                proxy.$comJs.msg('error','填写手机号/验证码信息')
            }
        }
      }
  </script>
  
  <style lang='less' scoped>

  .login-tip{
      font-size: 14px;
      span{
          color: #d10b00;
      }
  }
  .step{
    margin-top: 10px;
    .p{
        font-size: 14px;color: #333333;
        line-height: 20px;
    }
  }
  .loginView{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: url(@/assets/img/login/b.jpg);
    background-size:100% 100% ;
    top: 0;
    left: 0;
    
    
}
.btn{
    width: 238px;
    height: 54px;
    font-size: 20px;
    color: #fff;
    line-height: 54px;
    background: #d10b00;
    border-radius: 30px;
    margin-top: 30px;
    text-align: center;
}
.login-tip{
    font-size: 14px;
    span{
        color: #d10b00;
    }
}
.logo{
    width: 292px;
    height: 164px;
    img{
        width: 292px;
        height: 164px;
    }
}
.co{
        width: 900px;
        background: url(~@/assets/img/login/back.png) no-repeat;
        background-size: 100%;
        margin-top: 40px;
        padding-top: 120px;
        border-radius: 15px;
        padding-bottom: 50px;
    }

@media screen and (min-width: 1700px) {
/* 在屏幕大于**像素时应用这些样式 */
.logo{
    width: 292px;
    height: 164px;
    img{
        width: 292px;
        height: 164px;
    }
}
}
/* 在屏幕小于**像素时应用这些样式 */
@media screen and (max-width: 1700px) {
    .logo{
        width: 180px;
        height: 120px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
@media screen and (max-width: 1500px) {
    .logo{
        width: 150px;
        height: 92px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
  </style>
  
  